<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/series.css">
</head>
<body>
    <svg>
        <symbol id="left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></symbol>
        <symbol id="right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></symbol>
    </svg>
    <!-- 开头 -->
    <div class="head">
        <div class="logo"><img src="./images/catflix.svg" alt=""></div>
        <ul class="nav">
            <a href="./Home.html"><li class="iconfont">&#xe648;&nbsp;Home</li></a>
            <a href="./Movies.html"><li class="iconfont">&#xea51;&nbsp;Movies</li></a>
            <a href="./series.html"><li class="iconfont">&#xe60d;&nbsp;Series</li></a>   
        </ul>
        <div class="search">
            <input type="text" class="iconfont " value="&#xe60a; ">
            <input type="button" class="iconfont" value="&#xe657;">
        </div>
    </div>
    <!-- 中间部分 -->
    <div class="banner">
        <div class="header">
            <h1>Series</h1>
            <svg class="left">
                <use xlink:href="#left" />
            </svg>
            <svg class="right">
                <use xlink:href="#right" />
            </svg>
            <ul>
                <li><button>featured</button></li>
                <li><button>just_added</button></li>
                <li><button>A_Z</button></li>
                <li><button>Popular</button></li>
                <li><button>Action</button></li>
                <li><button>Action</button></li>
                <li><button>Action&Adventure</button></li>
                <li><button>adventure</button></li>
                <li><button>animation</button></li>
                <li><button>Comedy</button></li>
                <li><button>Crime</button></li>
                <li><button>Documentary</button></li>
                <li><button>Drama</button></li>
                <li><button>Family</button></li>
                <li><button>Fantasy</button></li>
                <li><button>History</button></li>
                <li><button>horror</button></li>
                <li><button>kids</button></li>
                <li><button>music</button></li>
                <li><button>Mystery</button></li>
                <li><button>Reality</button></li>
                <li><button>Romance</button></li>
                <li><button>Sci-Fi & Fantasy</button></li>
                <li><button>Science Fiction </button></li>
                <li><button> Soap</button></li>
                <li><button>Thriller</button></li>
                <li><button>TV Movie</button></li>
                <li><button>War</button></li>
                <li><button>WAR & Politics</button></li>
                <li><button>Western</button></li>
            </ul>
        </div>
        <div class="cont">
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/sfd90NIf778KoBFmpdBTow4xTm7.jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/c2Od0cY2IeayDj5osUxZSAD1QK.jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/zZyKvdT5oukcWZbcEp2G6ZlVu58.jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/y7ta5bQKCPR0c4mKfFoGxFOejp.jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U.jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
        </div>
        <input type="checkbox" id="btn">
        <div class="cont" id="e">
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
            <a href="">
                <img src="./images/xYdzshohIWsrBpIrFlYiT8wgv7U (1).jpg" alt="">
                <div>
                    <li></li>
                    <img src="./images/1DmAeDIAN6nvVpgTqiurDPUwuj7.jpg" alt="">
                    <h1>Nobady Wants this</h1>
                    <h2>TMD 7.7 2024 * 2 Seasons</h2>
                    <button>watch now</button>
                    <p>An agnostic sex podcaster and a
                        newly single rabbi fall in love, but can their relationship survive their wildly different [..]</p>
                </div>
            </a>
        </div>
        <label for="btn">
            <p class="more">loed more</p>
        </label>
        <input type="checkbox" id="btn">
    </div>
    <!-- 结尾 -->
    <div class="tail">
        <div class="logo">
            <a href=""><img src="./images/catflix.svg" alt=""></a>
        </div>
        <ul class="nav">
            <li><a href="#">home</a></li>
            <li><a href="#">movies</a></li>
            <li><a href="#">series</a></li>
            <li><a href="#">search</a></li>
        </ul>
        <ul class="end">
            <li>distv+2023</li>
            <li>Home</li>
            <li>Movies</li>
            <li>Series</li>
            <li>search</li>
        </ul>
    </div>
</body>
</html>